<template>
    <view class="novice">
        <cover-view :style="{ paddingTop: statusBarHeight + 'px' }" class="header w-f" style="z-index: 99">
            <cover-view class="f ai-c jc-s-b ph-32 h-88">
								<cover-view class="tab">
									<cover-view v-for="(item,index) in typeList" :class="type==index?'tabLiAct':'tabLi'" @click="changeType(index)">
										{{item.name}}
										<cover-view class="acitve" v-if="type==index"></cover-view>
									</cover-view>
								</cover-view>
                <cover-image src="http://cwht.ricecs.cn/app/novice/release.png" class="w-40 h-40 mp-weixin" style="margin-right: 200rpx" @click="toRelease"></cover-image>
            </cover-view>
        </cover-view>

        <view :style="{ paddingTop: statusBarHeight + 'px' }"><view class="w-f h-88"></view></view>
        <view class="ph-24 pv-20">
            <Care v-show="type == 0" ref="care" />
            <Recommend v-show="type == 1" />
            <New v-show="type == 2" ref="newRef" />
        </view>
    </view>
    <!-- tab -->
    <!-- <Tabbar tab="1" /> -->
</template>
<script setup lang="ts">
import { onLoad, onReachBottom, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import Care from './Care.vue';
import Recommend from './Recommend.vue';
import New from './New.vue';
const typeList = [{ name: '关注' }, { name: '推荐' }, { name: '新手养宠' }];
const type = ref(0);
const care = ref();
const newRef = ref();
onLoad(() => {
});
onShow(() => {
    let pages = getCurrentPages();
    let currPage: any = pages[pages.length - 1];
    let upDate = currPage.data.upDate;
    if (upDate) {
        newRef.value.onPullDownRefresh();
    }
});
//下拉刷新
onPullDownRefresh(() => {
    care.value.onPullDownRefresh();
    newRef.value.onPullDownRefresh();
});
//上拉加载
onReachBottom(() => {
    care.value.onReachBottom();
    newRef.value.onReachBottom();
});

const changeType = (data: any) => {
    type.value = data;
};
const toRelease = () => {
    uni.navigateTo({
        url: '/pages_novice/release',
    });
};
//头部
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
</script>
<style lang="scss" scoped>
.novice {
    background: #f5f5f5;
    min-height: 100vh;
    .header {
        position: fixed;
        left: 0;
        top: 0;
        background: #f5f5f5;
        z-index: 111;
    }
}
.tab{
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	.tabLi{
		font-size: 30rpx;
		margin:0 24rpx;
		padding-bottom: 10rpx;
	}
	.tabLiAct{
		font-size: 32rpx;
		margin:0 24rpx;
		font-weight: bold;
		position: relative;
		padding-bottom: 10rpx;
		.acitve{
			content: '';
			width: 32rpx;
			height: 6rpx;
			background: #FABB3C;
			border-radius: 3rpx;
			position: absolute;
			bottom: 0rpx;
			left: calc(50% - 16rpx);
		}
	}
}
</style>
